<template>
  <div>
    <el-button type="primary" icon="el-icon-back" @click="$router.back()">返回</el-button>
    <el-row type="flex" justify="space-around" class="mg">
      <el-col class="box" :span="11">
        <el-row type="flex" justify="space-around" style="margin:auto">
          <el-col :span="10">
            <div class="flex">
              <el-card :body-style="{ padding: '0px' }">
                <img :src="userinfo.photo" class="image" />
                <div style="padding: 14px;">
                  <span>姓名：{{ userinfo.name }}</span>
                  <div class="bottom clearfix">
                    <time class="time">注册时间：{{ userinfo.cTime }}</time>
                  </div>
                </div>
              </el-card>
            </div>
          </el-col>
          <el-col :span="13" class="info_box">
            <p>性别：{{ userinfo.sex }}</p>
            <p>联系电话：{{ userinfo.tel }}</p>
            <p>
              身份证：
              <el-tooltip placement="top" effect="light">
                <div slot="content">
                  <el-row
                    type="flex"
                    justify="space-around"
                    style="width:550px"
                  >
                    <el-col :span="11">
                      <el-image :src="domain + userinfo.cert_a" fif="cover">
                      </el-image
                    ></el-col>
                    <el-col :span="11">
                      <el-image
                        :src="domain + userinfo.cert_b"
                        fif="cover"
                      ></el-image>
                    </el-col>
                  </el-row>
                </div>
                <el-button class="hovercard">{{ userinfo.card }}</el-button>
              </el-tooltip>
            </p>
            <p>从业年限：{{ doctorinfo.job_year }}年</p>
            
            <p>是否开通咨询：
              <span v-if="doctorinfo.is_zixun == 1">是</span>
              <span v-else>否</span>
            </p>
            <p>咨询人数：{{doctorinfo.zixun_count}}</p>
            <p>关注数量：{{doctorinfo.foucs_num}}</p>
            <p>等级：{{doctorinfo.rank}}</p>
          </el-col>
        </el-row>
      </el-col>

      <!-- 卡券表格 -->
      <el-col class="box r" :span="11">
        <div>
          <p>技师简介：</p>
          <p>{{ doctorinfo.intro }}</p>
        </div>
        <div>
            <p>获得荣誉：</p>
            <p>{{ doctorinfo.hover }}</p>
        </div>
      </el-col>
    </el-row>

    <!-- 卡片 -->

    <el-row class="mg" type="flex" justify="space-around">
      <el-col class="box" :span="5">
        <p>执业地点：{{ doctorinfo.job_address }}</p>
      </el-col>
      <el-col
        class="box"
        :span="11"
        ><p class="yue">
          <span>总收入：{{zsr}}</span>
          <span>已提现：{{ytx}}</span>
          <span>未提现：{{wtx}}</span>
        </p>
      </el-col>
      <el-col class="box" :span="5">
        <p>
          执业类型：<span>
            <el-tooltip placement="top" effect="light">
              <div slot="content">
                <el-card
                  :body-style="{ padding: '0px' }"
                  v-for="(item, i) in doctorinfo.doc_type"
                  :key="i"
                  style="display: inline-block;margin: 10px;"
                >
                  <img :src="item.img" class="image" style="width:300px" />
                  <div style="padding: 14px;">
                    <span class="typename">执业类型：{{ item.type.name }}</span>
                    <div class="bottom clearfix">
                      <time class="time" >
                        获得资格证时间：{{ item.auth_time }}
                      </time>
                    </div>
                  </div>
                </el-card>
              </div>
              <el-button class="typebtn">悬停查看</el-button>
            </el-tooltip>
          </span>
        </p>
      </el-col>
    </el-row>

    <!-- 表格 -->
    <el-row class="mg" type="flex" justify="space-around">
      <el-col class="box" :span="23">
        <el-row class="mg" type="flex" justify="space-around">
          <el-col :span="14">
            <el-input class="input-with-select" style="width:100%">
              <el-button
                class="filter-item"
                type="primary"
                slot="append"
                icon="el-icon-search">
                搜索
              </el-button>
            </el-input>
          </el-col>
          <el-col :span="4">
            <!-- <el-date-picker
              style="width:100%"
              v-model="servicemonthstart"
              @change="setmonth"
              type="month"
              placeholder="开始时间"
              value-format="timestamp"
            >
            </el-date-picker> -->
          </el-col>
          <el-col :span="4">
            <!-- <el-date-picker
              style="width:100%"
              v-model="servicemonthend"
              @change="setmonth"
              type="month"
              placeholder="结束时间"
              value-format="timestamp"
            >
            </el-date-picker> -->
          </el-col>
        </el-row>
        <el-table
          :data="orderinfo"
          style="width: 100%"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <el-table-column
            label="订单号"
            align="center"
            prop="order_id"
            sortable
            width="100"
          >
          </el-table-column>

          <el-table-column
            label="客户id"
            align="center"
            prop="u_id"
            width="100"
          >
          </el-table-column>

          <el-table-column
            label="客户姓名"
            align="center"
            prop="user.name"
            width="100"
          >
          </el-table-column>
          <el-table-column
            label="用户联系方式"
            align="center"
            prop="user.tel"
          >
          </el-table-column>

          <el-table-column
            label="接单时间"
            align="center"
            prop="receive_time"
            sortable
          >
          </el-table-column>

          <el-table-column
            label="订单码"
            width="100"
            align="center"
            prop="code"
            sortable
          >
          </el-table-column>

          <el-table-column
            label="服务名称"
            align="center"
            prop="servers.name"
            sortable
          >
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getdoctor } from '@/api/user/user.js'
import { getmoney } from '@/api/user/money.js'
import { orderSearch } from '@/api/service/service.js'
export default {
    data() {
        var domain = process.env.VUE_APP_BASE_API
        var time = parseInt(new Date().getTime())
        return {
            doctorinfo: {},
            userinfo: {},
            orderinfo: [],
            couponinfo: [],
            domain: domain,
            servicemonthstart: time - 2592000000,
            servicemonthend: time,
            updateview: 0,
            ytx:0,
            wtx:0,
            zsr:0
        }
    },
    created() {
        console.log(this.$route.query)
        this.requestuser()
        // console.log(this.servicemonthstart)
        // console.log(this.servicemonthend)
        this.requestorder()
        this.requestyue()
    },
    methods: {
        setmonth() {
            this.requestorder()
        },
        requestuser() {
            var that = this
            var data = {
                field: 'u_id',
                value: that.$route.query.id,
                op: '=',
                order_by:"cTime",
                page: 1
            }
            getdoctor(data).then(res => {
                that.doctorinfo = res[0]
                that.userinfo = res[0].user
                console.log(that.doctorinfo)
            })
        },
        requestyue(){
          let that = this;
          getmoney({
            field:"doc_id",
            op:"=",
            value:that.$route.query.docid,
            start_time:0,
            end_time:9999999999999,
            field1:"doc_is_tixian",
            op1:"=",
            value1:"1"
          }).then(res=>{
            res.forEach(val => {
              that.ytx = (parseFloat(that.ytx) + parseFloat(val.doc_yue)).toFixed(2)
            });
          })
          getmoney({
            field:"doc_id",
            op:"=",
            value:that.$route.query.docid,
            start_time:0,
            end_time:9999999999999,
            field1:"doc_is_tixian",
            op1:"=",
            value1:"0"
          }).then(res=>{
            res.forEach(val => {
              that.wtx = (parseFloat(that.wtx) + parseFloat(val.doc_yue)).toFixed(2)
            });
          })
          getmoney({
            field:"doc_id",
            op:"=",
            value:that.$route.query.docid,
            start_time:0,
            end_time:9999999999999,
            field1:"",
            op1:"",
            value1:""
          }).then(res=>{
            res.forEach(val => {
              that.zsr = (parseFloat(that.zsr) + parseFloat(val.doc_yue)).toFixed(2)
            });
          })
        },
        requestorder() {
            var that = this
            var data = {
                field: 'doc_id',
                value: this.$route.query.docid,
                op: '=',
                // start_time: parseInt(that.servicemonthstart / 1000),
                // end_time: parseInt(that.servicemonthend / 1000)
                name:""
            }
            console.log('订单请求', data)
            orderSearch(data).then(res => {
                console.log('查找订单', res)
                that.orderinfo = res
            })
        }
    }
}
</script>

<style scoped>
.info_box > p {
  margin: 16px 0;
}
.flex {
  display: flex;
  flex-flow: column;
  height: 100%;
}
.icon {
  margin: auto;
  width: 100%;
}
.box {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}
.mg {
  margin: 15px;
}
.r>div{
  display: flex;
  font-weight: bold;
  align-items: flex-start;
}
.time {
  font-size: 13px;
  color: #999;
}
.image {
  width: 100%;
  display: block;
}

.idcard {
  text-align: center;
  font-size: 20px;
  margin-top: 10px;
}
.hovercard {
  padding: 5px;
}
.typebtn {
  padding: 0;
  border: 0;
  font-size: 16px;
  color: #409eff;
}
.typename {
  font-size: 16px;
}
.yue{
  display: flex;
  justify-content: space-around;
}
</style>
